<!--  -->
<template>
  <el-dropdown placement="top-start" trigger="click">
    <span class="el-dropdown-link">选择图片</span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>
        <div class="icon-container flex-row">
          <div
            class="icon-bg flex-row-center"
            v-for="(item, index) in iconList"
            :key="item"
            @click="handleClick(index)"
          >
            <img :src="item" alt="" />
          </div>
        </div>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { getBase64Image } from '@/utils/tools'

const iconList = [
  'bianxing.png',
  'dungou.png',
  'fengxianguankong.png',
  'guandao.png',
  'jiance.png',
  'jikeng.png',
  'policeman.png',
  'quanjing.png',
  'robot.png',
  'sanfangjiance.png',
  'shengjiangji.png',
  'shibie.png',
  'shijingjiankong.png',
  'shiming.png',
  'shipinjiankong.png',
  'shipinwulian.png',
  'shuidianbiao.png',
  'shuizhi.png',
  'tadiao.png',
  'wulianwang.png',
  'yangan.png',
  'yangchen.png',
]

export default {
  data() {
    return {
      imageBase64List: [],
    }
  },

  components: {},

  mounted() {
    const result = []
    this.iconList.forEach(item => {
      const img = new Image()
      img.src = item
      img.onload = async () => {
        result.push(getBase64Image(img))
      }
    })
    this.imageBase64List = result
  },

  computed: {
    iconList() {
      return iconList.map(item => require(`./img/${item}`))
    },
  },

  methods: {
    handleClick(index) {
      this.$emit('getImage', this.imageBase64List[index])
    },
  },
}
</script>
<style lang='scss' scoped>
.icon-container {
  width: vw(280px);
  height: vw(70px);
  overflow: auto;
  flex-wrap: wrap;
}

.el-dropdown-link {
  color: $link-color;

  &:hover {
    cursor: pointer;
  }
}

.icon-bg {
  width: vw(20px);
  height: vw(20px);
  margin-right: vw(10px);
  background: #fff;

  img {
    z-index: 888;
    width: vw(18px);
    height: auto;
  }

  &:hover {
    cursor: pointer;
    background: #ccc;
  }
}

::v-deep .el-dropdown-menu__item {
  padding: 0 vw(10px);
  color: #fff;

  &:hover {
    cursor: default;
    background: #fff;
  }
}
</style>
